<template>
  <div>
    <!-- 使用 Element Plus 的 Card 组件作为注册表单的容器 -->
    <el-card class="box-card">
      <h2>注册</h2>
      <!-- 使用 Element Plus 的 Form 组件，设置表单的模型、规则、引用等 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleFormRef"
        label-position="left"
        label-width="80px"
        class="demo-ruleForm"
      >
        <!-- 用户名输入框 -->
        <el-form-item label="账号" prop="uname">
          <el-input v-model="ruleForm.uname"
          placeholder="请输入账号"
          clearable
          ></el-input>
        </el-form-item>
        <!-- 邮箱输入框 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"
          placeholder="请输入邮箱"
          clearable
          ></el-input>
        </el-form-item>
        <!-- 手机号输入框 -->
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="ruleForm.phonenumber"
          placeholder="请输入手机号"
          clearable
          ></el-input>
        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            placeholder="请输入密码"
            autocomplete="off"
            show-password  
          ></el-input>
        </el-form-item>
        <!-- 确认密码输入框 -->
        <el-form-item label="确认密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            placeholder="请再次输入密码"
            show-password  
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮组 -->
      <div class="btnGroup">
        <!-- 提交按钮，点击时触发 submitForm 方法，并显示加载动画 -->
        <el-button type="primary" @click="submitForm" v-loading="loading"
          >提交</el-button
        >
        <!-- 重置按钮，点击时触发 resetForm 方法 -->
        <el-button @click="resetForm">重置</el-button>
        <!-- 返回按钮，点击时触发 goBack 方法 -->
        <el-button @click="goBack">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import axios from 'axios';

// 使用 Vue Router
const router = useRouter();

// 定义表单数据
const ruleForm = reactive({
  uname: '',
  pass: '',
  password: '',
  phonenumber: '',   // 新增手机号字段
  email: '',         // 新增邮箱字段
});

// 定义表单引用
const ruleFormRef = ref(null);

// 定义加载状态
const loading = ref(false);

// 密码验证规则
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    callback();
  }
};

// 确认密码验证规则
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== ruleForm.pass) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};

// 定义表单验证规则
const rules = reactive({
  uname: [    //账号
    { required: true, message: '用户名不能为空！', trigger: 'blur' },
    { max: 20, message: '账号长度不能超过20个字符！', trigger: 'blur' },
  ],
  email: [    //邮箱
    { required: true, message: '邮箱不能为空！', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
  ],
  phonenumber: [    //手机号
    { required: true, message: '手机号不能为空！', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  pass:  [    //密码
    { required: true, validator: validatePass, trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度必须在6到20个字符之间！', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const hasLetter = /[a-zA-Z]/.test(value); // 至少一个字母
        const hasNumber = /\d/.test(value); // 至少一个数字
        const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(value); // 至少一个特殊字符

        if (!hasLetter || !hasNumber || !hasSpecialChar) {
          callback(new Error('密码必须包含至少一个字母、一个数字和一个特殊字符'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
  password: [  //确认密码
    { required: true, validator: validatePass2, trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度必须在6到20个字符之间！', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const hasLetter = /[a-zA-Z]/.test(value); // 至少一个字母
        const hasNumber = /\d/.test(value); // 至少一个数字
        const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(value); // 至少一个特殊字符

        if (!hasLetter || !hasNumber || !hasSpecialChar) {
          callback(new Error('密码必须包含至少一个字母、一个数字和一个特殊字符'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
});

// 提交表单的方法
const submitForm = async () => {
  loading.value = true; // 显示加载动画
  try {
    // 验证表单
    const isValid = await ruleFormRef.value.validate();
    if (isValid) {
      // 调用后端 API, 发送注册请求, 提交表单数据
      const response = await axios({
        url: '/api/user/register',
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
        },
        data: {
          uname: ruleForm.uname,
          password: ruleForm.password,
          phonenumber: ruleForm.phonenumber,
          email: ruleForm.email,
        },
      });
      
      if (response.data.code === '200') {
        ElMessage({
          message: response.data.msg,
          type: 'success',
        });
        // 注册成功后跳转到登录页面或其他页面
        router.push('/login'); // 假设跳转到登录页面
      } else {
        ElMessage({
          message: response.data.msg,
          type: 'warning',
        });
      }
    }
  } catch (error) {
    console.error('提交表单时出错:', error);
    ElMessage({
      message: '注册失败，请稍后重试',
      type: 'error',
    });
  } finally {
    loading.value = false; // 隐藏加载动画
  }
};

// 重置表单的方法
const resetForm = () => {
  ruleFormRef.value.resetFields();
};

// 返回上一页的方法
const goBack = () => {
  router.go(-1);
};
</script>

<style scoped>
/* 设置登录面板居中，宽度为400px */
.box-card {
  margin: auto auto;
  width: 400px;
}
/* 设置登录面板中的表单居中 */
.login-from {
  margin: auto auto;
}
</style>